<template>
  <el-card class="h-full w-full">
    <div class="flex h-full gap-4">
        <div class="w-1/3 flex flex-col gap-3">
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-input type="textarea" v-model="content" :placeholder="t('aigcKnowledgeSearch.inputContentTip')" :rows="10"/>
        </div>
        <div class="w-2/3">
            <el-skeleton :loading="loading" animated>
                <template #default>
                    <div class="grid grid-cols-3 gap-4">
                        <el-card v-for="item in list" :key="item.index" shadow="hover"
                            class="rounded-lg cursor-pointer">
                            <template #header>
                                <el-skeleton-item v-if="loading" variant="text" style="width: 60%" />
                                <div v-else class="flex items-center gap-1">
                                    <SvgIcon name="flat-color-icons:document" class="text-3xl" :iconify="true"/>
                                    <el-text truncated>{{item.docsName}}</el-text>
                                </div>
                            </template>
                            <el-scrollbar max-height="200px">
                                {{item.text}}
                            </el-scrollbar>
                        </el-card>
                    </div>
                </template>
            </el-skeleton>
            <el-empty v-if="list.length===0" class="my-4"/>
        </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
    import {embeddingSearch} from '/@/api/aigc/chat';
    import {useMessage} from '/@/hooks/message';
    import {useI18n} from 'vue-i18n';

    //知识库信息
    const props=defineProps({
        data:Object as PropType<any>,
    });
    const content=ref('');
    const {t} = useI18n();
    const loading=ref(false);
    const list=ref([]);

    const onSearch=async ()=>{
        if(!content.value){
            useMessage().warning(t('aigcKnowledgeSearch.inputContentTip'));
            return;
        }
        loading.value=true;
        try{
            const res = await embeddingSearch({
                content: content.value,
                knowledgeId: props.data?.id,
            });
            list.value=res.data;
        }catch (e) {
            console.log(e);
            useMessage().warning(e.msg || t('aigcKnowledgeSearch.searchError'));
        }finally {
            loading.value=false;
        }
    };
</script>
